<template>
	<div class="adress">		
				<div class="h_send">
					<h3>配送至</h3>
					<a href="javascript:history.back(-1)" class="iconfont icon-cuohao error" ></a>
				</div>
				<v-distpicker :placeholders="placeholders" class="txuan_total_address"  type="mobile" @selected='address_show'></v-distpicker>
			</div>
</template>

<script>
	import VDistpicker from 'v-distpicker'
	export default{
		name:"dizhi",
		components:{
			VDistpicker
		},
		data(){
			return{
				placeholders:{
					province:'-------省-------',
					city:'---市---',
					area:'---区---'
				}				
			}
		},
		methods:{
			address_show:function(data){				
				var str = data.province.value+' '+data.city.value+' '+data.area.value;
				this.$store.commit('place',str);
			},
			//控制地址页面出现
			addresshow: function() {
				$(".adress").css("display", "block");				
			}
		}
		
	}
</script>

<style scoped>
	/*地址部分*/
	
	.adress {
		width: 90%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 1%;
		background: rgba(255, 255, 255, 1);
		border: 1px solid red;
		z-index: 20;
	}
	
	.txuan_total_address {
		width: 100%;
		margin-top: 10%;
	}
	
	.h_send {
		width: 96%;
		position: relative;
		top: 3%;
		left: 2%;
		background: rgba(255, 255, 255, 1);
	}
	
	.error {
		position: absolute;
		right: 5%;
		top: 3%;
		text-decoration: none;
		color: grey;
	}
</style>